<template>
  <div class="toolItem" @mousedown="mouseDown">
    <div class="icon">
      <a-icon :type="data.icon" />
    </div>
    <div class="text">{{data.title}}</div>
  </div>
</template>
<script>
export default {
  props: {
    data: Object
  },
  methods: {
    mouseDown(event) {
      let target = event.currentTarget;
      let tempDiv = target.cloneNode(true);
      tempDiv.style.position = "absolute";
      tempDiv.style.left = target.offsetLeft - 24 + "px";
      tempDiv.style.top = target.offsetTop + "px";
      tempDiv.style.zIndex = 9
      target.parentNode.appendChild(tempDiv);
      let disX = event.clientX - tempDiv.offsetLeft;
      let disY = event.clientY - tempDiv.offsetTop;
      this.$root.form.curField = this.$props.data;
      let parentDom = document.querySelector("#formDesign");
      let moveFunc = e => {
        tempDiv.style.left = `${e.clientX - disX}px`;
        tempDiv.style.top = `${e.clientY - disY}px`;
      };
      let upFunc = e => {
        parentDom.removeEventListener("mousemove", moveFunc);
        parentDom.removeEventListener("mouseup", upFunc);
        parentDom.removeEventListener("mouseleave", upFunc);
        target.parentNode.removeChild(tempDiv);
      };
      parentDom.addEventListener("mousemove", moveFunc);
      parentDom.addEventListener("mouseup", upFunc);
      parentDom.addEventListener("mouseleave", upFunc);
    }
  }
};
</script>

<style lang="scss" scoped>
.toolItem {
  display: inline-block;
  margin-left: 12px;
  width: 108px;
  height: 36px;
  margin-bottom: 8px;
  line-height: 36px;
  border: 1px solid #ddd;
  border-radius: 2px;
  overflow: hidden;
  cursor: move;
  div {
    display: inline-block;
  }
  .text {
  }
  .icon {
    width: 36px;
    text-align: center;
  }
}
.toolItem:hover {
  background: #e6f7ff;
  border: 1px solid #1890ff;
  color: #1890ff;
}
</style>

